<template>
    <div class="form-time">

        <div class="inputs" @click="showTime('start')">
            <cube-input
                    v-model="start_time"
                    placeholder="请选择红包开始时间"
            >
            </cube-input>
        </div>

        <div class="inputs" @click="showTime('end')">
            <cube-input
                    v-model="end_time"
                    placeholder="请选择红包结束时间"
            >
            </cube-input>
        </div>

    </div>
</template>

<script>
export default {
    name: "form-time",
    data() {
        return {
            start_time: '',
            end_time: ''
        }
    },
    model: {
      prop: 'value',
      event: 'select'
    },
    props: {
      value: {
          type: Object,
          default() {
              return {start:0,end:0}
          }
      }
    },
    watch: {
        value() {
            this.init()
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        // 初始化时间
        init(){
            if(this.value.start){
                this.start_time = this.timestampToTime(this.value.start*1000)
            }
            if(this.value.end){
                this.end_time = this.timestampToTime(this.value.end*1000)
            }
        },
        // 显示时间选择器
        showTime(type) {
            let TimePicker = this.$createTimePicker({
                title: '选择时间',
                day: {
                    len: 200,
                    filter: ['今天','明天','后天'],
                    format: 'M月D日'
                },
                min: type === 'end' ? (this.start_time === '' ? null : new Date(this.start_time).getTime()) : null,
                onSelect: (res)=>{
                    let timestamp = res
                    let value = {
                        start: type === 'start' ? parseInt(res/1000) : this.value.start,
                        end: type === 'end' ? parseInt(res/1000) : this.value.end
                    }
                    this.$emit("select",value)
                    if(type === 'start'){
                        this.start_time = this.timestampToTime(timestamp)
                    } else {
                        this.end_time = this.timestampToTime(timestamp)
                    }
                }
            })
            TimePicker.show()
            if(type === 'start' && this.start !== ''){
                TimePicker.setTime(new Date(this.start_time).getTime())
            } else if(type === 'end' && this.end !== ''){
                TimePicker.setTime(new Date(this.end_time).getTime())
            }
        },
        // 时间戳转换时间格式化
        timestampToTime(timestamp) {
            let time = new Date(timestamp)
            let year = time.getFullYear()
            let month = time.getMonth() + 1
            let date = time.getDate()
            let hours = time.getHours()
            let minute = time.getMinutes()
            let second = time.getSeconds()

            if (month < 10) { month = '0' + month }
            if (date < 10) { date = '0' + date }
            if (hours < 10) { hours = '0' + hours }
            if (minute < 10) { minute = '0' + minute }
            if (second < 10) { second = '0' + second }
            return year + '-' + month + '-' + date + ' ' + hours + ':' + minute
        }
    }
}
</script>

<style scoped lang="less">
    .form-time{
        .inputs{
            position: relative;
            &::before{
                position: absolute;
                content: "";
                z-index: 10;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
